import React from 'react';
import * as GradeStyle from './Grade.less';

function cx(selectedItems,ID){
	if (selectedItems.length==0){
		return
	}else{
		for (var i=0;i<selectedItems.length;i++){
			if (selectedItems[i]==ID){
				return 'checked';
			}
		}
	}	
	return; 
};
export default class Grade extends React.Component {
	static propTypes = {
		name: React.PropTypes.string,
		onClick: React.PropTypes.func
	}
	constructor(props) {
		super(props);
	}
	//通过id多选,并推入state
	handleChecked = (ID) => {
	
		let { selectedItems, onSelectGrade } = this.props;
		let newArr = selectedItems.slice(0);
		if(newArr.indexOf(ID)==-1){
			newArr.push(ID);	
		}else{
			newArr.splice(newArr.indexOf(ID), 1);
		}
		onSelectGrade&&onSelectGrade(newArr)
	}
	//点击全选清除可选项
	handleSelectAll = () => {
		let { onSelectGrade } = this.props;
		let newArr = [];
		onSelectGrade&&onSelectGrade(newArr)
	}
	render() {
		let { selectedItems, options } = this.props;
		let items = options.reduce((items,n,index) => {

			items.push(
				<li key={index} onClick={() => this.handleChecked(n.enum)}>
				<b className={cx(selectedItems,n.enum)}></b>
						<span>{n.name}</span>
					</li>)
			return items;
		},[]);	
		items.pop();
		return (
			<div className={GradeStyle.grade} options={options} selectedItems={selectedItems}>
				<ul>
				<li>年级 ：</li>
				<li onClick={this.handleSelectAll} ><span className={selectedItems.length==0?'selectedAll':'unselectedAll'}>全部</span></li>
					{items}
				</ul>
			</div>
		);
	}
};


